<!-- 课程介绍 -->
<template>
    <div class="course-intro-wrap">
        <div>
            <p class="custom-header custom-header-first">
                <span>课程简介</span>
            </p>
            <EditorView v-if="detailData.description" :content="detailData.description || ''"/>
            <div v-else class="no-data-info">暂无简介</div>
        </div>
        <p class="custom-header custom-header-second">
            <span>教师团队</span>
        </p>
        <TeacherList v-if="showTeacherList && showTeacherList.length" :data="showTeacherList"/>
        <div v-else class="no-data-info">暂无教师信息</div>
    </div>
</template>

<script setup>
import EditorView from '@/components/editor-view/index.vue';
import TeacherList from '@/components/teacher-list/index.vue';
import { computed } from 'vue';

const props = defineProps({
    currentTab: {
        type: String,
        default: ''
    },
    detail: {
        type: Object,
        default: () => {
            return {};
        }
    },
});

const detailData = computed(() => {
    return props.detail;
})

// 显示出来的教师团队 教师团队最多显示9个
const showTeacherList = computed(() => {
    return detailData.value.lecturerList || [];
})
</script>

<style lang="scss" scoped>
.course-intro-wrap {
    margin: 30px 20px 20px;
    .custom-header {
        width: 100px;
        height: 16px;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            display: inline-block;
            width: 64px;
            height: 4px;
            background: #E7F1FF;
            left: 0;
            top: 13px;
            z-index: 0;
        }
        span {
            position: absolute;
            left: 0;
            font-size: 16px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            color: #000000;
            line-height: 16px;
        }
    }
    .custom-header-first {
        margin-top: -5px;
        margin-bottom: 11px;
    }
    .custom-header-second {
        margin-top: 40px;
        margin-bottom: 14px;
    }
    .no-data-info {
        font-size: 14px;
        color: #666666;
        line-height: 22px;
        padding-bottom: 30px;
    }
}
</style>